<template>
  <div id="community_square">

    <header class="mui-bar mui-bar-nav">
      <h1 class="mui-title">社区广场</h1>
      <a class="mui-pull-right icon_r" @tap="open_add_square_view"><img src="../../assets/images/sqgc_nav.png"/></a>
    </header>


    <div class="mui-content sqgc_view">
      <ul>
        <li v-for="(item,k) in list" class="sqgc_li" >
          <div class="l">
            <img :src="item.user_img"/>
          </div>
          <div class="r">
            <p class="t1" v-html="item.user_name"></p>
            <p class="t2" v-html="item.info"></p>

            <div class="img">
              <img :src="img" data-preview-src="" :data-preview-group="k" v-for="(img,k2) in item.imgs" :key="k2"/>
            </div>
            <div class="bottom">
              <p class="time" v-html="item.time"></p>
              <p class="like" @tap="zan(k)" :style="item.style==1?'color: #1c83fc;':''"><i class="mui-icon-extra mui-icon-extra-like"></i><span v-html="item.zan"></span></p>
            </div>
          </div>
        </li>

      </ul>
      <br>
      <br>
      <div style="font-size: 0.4rem;text-align: center">没有更多了</div>
      <br>
      <br>
      <br>
      <br>
    </div>


    <transition  enter-active-class="animated slideInRight" leave-active-class="animated slideOutRight">
      <div class="absolute" v-if="$store.state.home_status.show_add_square">
        <SquareForm v-if="$store.state.home_status.show_add_square"></SquareForm>
      </div>
    </transition>

    <HomeFooter></HomeFooter>
  </div>
</template>

<script>
  import HomeFooter from '../../components/HomeFooter'
  import home_ajax from '@/ajax/home_ajax';
  import SquareForm from './SquareForm'

  export default {
    name: 'sqgc_list',
    data() {
      return {
        list: "",
      };
    },
    methods: {
      get_square_list() {
        home_ajax.get_square_list({
          sqid: 59,
          uid: 15
        }, res => {
          console.log(res)
          this.list = res;
        })
      },
      zan(k){
         console.log(k);
         let item = this.list[k];
        home_ajax.sq_zan({
          coid:item.coid,
          uid:this.$store.state.account.user_info.uid,
          sqid:this.$store.state.account.community.sqid
        },res=>{
          if(res==1){
            this.list[k].style=1;
            this.list[k].zan = this.list[k].zan+1
          }else {
            this.list[k].style=0
            this.list[k].zan = this.list[k].zan-1
          }
        })



      },
      open_add_square_view() {
        this.$store.commit('open_add_square_view', true)
      }
    },
    created() {
      this.get_square_list()
    },
    mounted() {
      mui.previewImage();
      console.log("mui.previewImage()")
    },
    components: {
      HomeFooter,
      SquareForm
    }
  }
</script>
<style lang="less" scoped>
  @import "../../../static/pxvalue.less";
  @import "../../assets/less/index/sqgc_list.less";
  .absolute{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    z-index: 10001;
  }


</style>

